import React, { useState, lazy, Suspense } from "react";

// import命令，同步引入，必须要放在所有代码的最上面
// import Child from "./Child";

// import函数是用来做异步引入的
// lazy懒加载是必须配合Suspense组件一起用
const Child = lazy(() => import("./Child"));

const App = () => {
  const [show, setShow] = useState(false);

  const fn = () => {
    setShow(true);
  };

  return (
    <>
      <h2>组件懒加载</h2>
      <button onClick={fn}>btn</button>
      {show && (
        <Suspense fallback={<div>loading...</div>}>
          <Child />
        </Suspense>
      )}
    </>
  );
};

export default App;
